<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="option"
               v-model:page="page"
               :table-loading="loading"
               @on-load="onLoad"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               :before-open="beforeOpen"
               v-model="form"
               :data="data">
      <template #qrList-form="{}">
        <avue-crud :option="qrListOption"
                   :data="form.qrList"></avue-crud>
      </template>


    </avue-crud>
  </basic-container>
</template>

<script >
import {addContainer, delContainer, listContainer, updateContainer} from "/@/api/base/container";
import {reactive, ref, toRefs,watch} from "vue";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import {generateQr, getContainerQr} from "../../api/base/container";
import {getCraftProcessInfo} from "../../api/base/craftProcess";

export default {
  name: "container",

  setup(props){
    const { proxy } = useCurrentInstance();

    const option = ref({
      searchMenuSpan: 6,
      tip: false,
      border: true,
      index: false,
      viewBtn: false,
      selection: true,
      addBtn:true,
      searchLabelWidth:100,
      excelBtn:false,
      labelWidth:100,
      column: [


        {
          label: '容器编码',
          prop: "encode",
          minWidth: 150, search: true
        },

        {
          label: '容器名称',
          prop: "name",
          minWidth: 150, search: true
        },

        {
          label: '规格大小',
          prop: "specificationSize",
          minWidth: 150,
        },

        {
          label: '数量',
          prop: "number",
          minWidth: 150,
          change:(aa)=>{
            console.log(aa)
            // let count =Number(value);
            //
            // if (value && !isNaN(count) ){
            //   if (count === form.value.qrList.length && count > 0) {
            //     return;
            //   }
            //   form.value.qrList = [];
            //   generateQr(count).then(res=>{
            //     let list = res.data || [];
            //     generateQrList(list,count);
            //   })
            // }
          }
        },
        {
          label: '',
          labelWidth: 0,
          prop: 'qrList',
          span:24,hide: true
        },
        {
          label: '申请人',
          prop: "applicantUserName",
          minWidth: 150,display:false,
        },
        {
          label: '审批人',
          prop: "approvalUserName",
          minWidth: 150,display:false,
        },

        {label: '录入/更新时间', prop: 'updateTime',display:false,
          search:true,searchRange:true, type: 'date',
          format: 'YYYY-MM-DD HH:mm:ss',
          searchLabelWidth: 120,minWidth: 180,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',},

      ]
    });

    const qrListOption = ref({
      menu: false,
      border:true,
      header:false,
      align: 'center',
      column: [


        {
          label: '序号',
          prop: "serial1",
          minWidth: 150,
        },
        {
          label: '二维码',
          prop: "eqCode1",   minWidth: 150,
        },
        {
          label: '序号',
          prop: "serial2",   minWidth: 150,
        },
        {
          label: '二维码',
          prop: "eqCode2",   minWidth: 150,
        },
        {
          label: '序号',
          prop: "serial3",   minWidth: 150,
        },
        {
          label: '二维码',
          prop: "eqCode3",   minWidth: 150,
        },

      ]
    });
    const loading = ref(true);
    const data = ref([]);
    const crud = ref();
    const selectionList = ref([]);
    const queryParams = ref({});
    const form = ref({qrList:[],list:[]});
    const page = ref({
      pageSize: 10,
      currentPage: 1,
      total: 0

    })
    const onLoad = (pages, params = {}) => {
      loading.value = true;
      listContainer(Object.assign({ page: pages.currentPage,
        limit: pages.pageSize,},params, queryParams.value)).then(res => {
        const resData =  res.data;
        page.value.total = resData.total;
        data.value = resData.list;
        loading.value = false;
        selectionClear();
      })
    }
    const selectionClear = () => {
      selectionList.value = [];
    }
    const rowSave = (row, done, loading) => {
      addContainer(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowUpdate = (row, index, done, loading) => {
      updateContainer(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowDel = (row) => {
      proxy.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return delContainer(row);
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }
    const refreshChange = () => {
      onLoad(page.value, queryParams.value);
    }
    const searchChange = (params, done) => {
      page.currentPage = 1;
      onLoad(page.value, params);
      done();
    }
    const generateQrList =(list,count)=>{
      let qrList = []
      for (let i = 0; i < list.length / 3; i++) {
        let param = {};
        let index1 =  i * 3;
        if (index1 < count){
          param['serial1'] = index1 +1;
          param['eqCode1'] = list[index1];
        }
        let index2 = 3*i + 1;
        if (index2 < count){
          param['serial2'] = index2 +1;
          param['eqCode2'] = list[index2];
        }
        let index3 = 3*i + 2;
        if (index3 < count){
          param['serial3'] = index3 +1;
          param['eqCode3'] = list[index3];
        }
        qrList.push(param);
      }
      form.value.qrList = qrList;
      form.value.list = list;
    }


    const beforeOpen = (done, type) => {
      if (["edit", "view"].includes(type)) {
        getContainerQr(form.value.id).then(res => {
          //form.value.list = res.data || [];
          let list = res.data || [];
          generateQrList(list.map(item => item.qrCode),form.value.number);
          done();
        });
      }else {
        done()
      }

    }
    watch(()=>form.value.number,()=>{
      let count =Number(form.value.number);

      if ( !isNaN(count) ){
        if (count === form.value.list.length && count > 0) {
          return;
        }
        form.value.qrList = [];
        generateQr(count).then(res=>{
          let list = res.data || [];
          generateQrList(list,count);
        })
      }
    })

    return {
      option,
      qrListOption,
      loading,
      data,
      page,
      form,
      queryParams,
      onLoad,
      rowSave,
      rowUpdate,
      rowDel,
      refreshChange,
      searchChange,
      beforeOpen
    }
  }
}
</script>
